<template>
<div>
  <div class="recommend">
    <div class="recommend-title">热销推荐</div>
    <ul>
        <li class="recommend-item" v-for="item in recommendList" :key="item.id">
          <div class="recommend-item-imgwrapper"><img class="recommend-item-img" :src="item.imgUrl" /></div>
          <div class="recommend-item-info">
            <p class="recommend-item-title">{{ item.title }}</p>
            <p class="recommend-item-desc">{{ item.desc }}</p>
            <button class="recommend-item-button" @click="$router.push({ name: 'recommendDetail', params: { id: item.id } })">查看详情</button>
          </div>
        </li>
    </ul>
  </div>
</div>
</template>

<script>
export default {
  name: 'HomeRecommend',
  data() {
    return {
      recommendList: [{
          id: "0001",
          imgUrl: "https://xiaoxiaojiaoyu.goldbarsoft.com/static/img/ic_default_logo.e679a318.png",
          title: "大西瓜",
          desc: "好大好大好大好大的瓜"
        },
        {
          id: "0002",
          imgUrl: "https://xiaoxiaojiaoyu.goldbarsoft.com/static/img/ic_default_logo.e679a318.png",
          title: "大西瓜",
          desc: "好大好大好大好大的瓜"
        },
        {
          id: "0003",
          imgUrl: "https://xiaoxiaojiaoyu.goldbarsoft.com/static/img/ic_default_logo.e679a318.png",
          title: "大西瓜",
          desc: "好大好大好大好大的瓜"
        },
        {
          id: "0004",
          imgUrl: "https://xiaoxiaojiaoyu.goldbarsoft.com/static/img/ic_default_logo.e679a318.png",
          title: "大西瓜",
          desc: "好大好大好大好大的瓜"
        }
      ],
    }
  },
}
</script>

<style scoped>
.recommend {
  width: 327px;
  background: #FFFFFF;
  box-shadow: 0px 3px 14px rgba(78, 112, 184, 0.07);
  border-radius: 8px;
  margin: 24px auto;
  padding: 8px 12px;
  box-sizing: border-box;
}

.recommend-title {
  font-size: 12px;
  font-family: PingFang SC;
  font-weight: bold;
  line-height: 17px;
  color: #6A6F7A;
}

.recommend-item {
  overflow: hidden;
  display: flex;
  height: 80px;
  border-radius: 8px;
  margin: 8px auto;
  background: #F5F6F6;
}

.recommend-item-img {
  width: 70px;
  height: 70px;
  padding: 5px
}

.recommend-item-info {
  min-width: 0;
  flex: 1;
  padding: 6px;
}

.recommend-item-title {
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: bold;
  line-height: 20px;
  color: #2C2E34;
}

.recommend-item-desc {
  font-size: 12px;
  line-height: 20px;
  color: #6A6F7A;
}

.recommend-item-button {
  font-size: 13px;
  line-height: 13px;
  margin-top: 5px;
  background-color: #74f1d0;
  padding: 5px;
  border-radius: 6px;
  color: #fff
}
</style>
